<template>
	<view style="display: flex;flex-direction: column;height: 100%;">
		<view class="daohanglan uni-flex">
			<!-- <view class="" style="height: 64rpx;">
				<view :class="['title-text',selected==0?'text-selected':'text-no-selected']" @tap="dianji(0)">全部</view>
				<view :class="[selected==0?'selected':'hide']"></view>
			</view> -->
			<view class="" style="height: 64rpx;">
				<view :class="['title-text',selected==1?'text-selected':'text-no-selected']"  @tap="dianji(1)">推广佣金</view>
				<view :class="[selected==1?'selected':'hide']"></view>
			</view>
			<view class="" style="height: 64rpx;">
				<view :class="['title-text',selected==2?'text-selected':'text-no-selected']"  @tap="dianji(2)">到账</view>
				<view :class="[selected==2?'selected':'hide']"></view>
			</view>
			<view class="" style="height: 64rpx;">
				<view :class="['title-text',selected==3?'text-selected':'text-no-selected']"  @tap="dianji(3)">任务佣金</view>
				<view :class="[selected==3?'selected':'hide']"></view>
			</view>
		</view>
		<view class="" style="flex: 1;overflow-y: scroll;">
			<!-- <view :class="[selected==0?'':'hide','']">
				<view class="tixian">
					<image src="../../static/image/loginoii.png" mode="" class="tixain-pic"></image>
					<view class="tianxian-info">
						<view class="tianxian-text">提现</view>
						<view class="tixian-shijian">今天 20:30:25</view>
					</view>
					<view class="tixian-jine">-200</view>
				</view>
				<view class="tixian">
					<image src="../../static/image/loginoii.png" mode="" class="tixain-pic"></image>
					<view class="tianxian-info">
						<view class="tianxian-text">提现</view>
						<view class="tixian-shijian">今天 20:30:25</view>
					</view>
					<view class="tixian-jine">-200</view>
				</view>
				<view class="tixian">
					<image src="../../static/image/loginoii.png" mode="" class="tixain-pic"></image>
					<view class="tianxian-info">
						<view class="tianxian-text">提现</view>
						<view class="tixian-shijian">今天 20:30:25</view>
					</view>
					<view class="tixian-jine jia">+200</view>
				</view>
			</view> -->
			<view :class="[selected==1?'':'hide']">
				
				<view class="" v-if="list1.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
					<image  src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
					暂无数据
				</view>
				
				<view class="tixian" v-for="(item,index) in list1" :key="item.id">
					<image :src="$jiekou.uploadBaseUrl+item.head" mode="" class="tixain-pic"></image>
					<view class="tianxian-info">
						<view class="tianxian-text">{{item.tuiguangStr}}</view>
						<view class="tixian-shijian">{{item.time | dateFormat('YYYY-mm-dd')}}</view>
					</view>
					<view class="tixian-jine" v-if="item.type==2">-{{item.jine}}</view>
					<view class="tixian-jine jia" v-else>+{{item.jine}}</view>
					
				</view>
				<!--<view class="tixian">
					<image src="../../static/image/loginoii.png" mode="" class="tixain-pic"></image>
					<view class="tianxian-info">
						<view class="tianxian-text">提现</view>
						<view class="tixian-shijian">今天 20:30:25</view>
					</view>
					<view class="tixian-jine">-200</view>
				</view>
				<view class="tixian">
					<image src="../../static/image/loginoii.png" mode="" class="tixain-pic"></image>
					<view class="tianxian-info">
						<view class="tianxian-text">提现</view>
						<view class="tixian-shijian">今天 20:30:25</view>
					</view>
					<view class="tixian-jine jia">+200</view>
				</view> -->
			</view>
			<view :class="[selected==2?'':'hide']">
				
				<view class="" v-if="list2.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
					<image  src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
					暂无数据
				</view>
				
				<view class="tixian" v-for="(item,index) in list2" :key="item.id">
					<image :src="$jiekou.uploadBaseUrl+head" mode="" class="tixain-pic"></image>
					<!-- <image v-else src="../../static/image/loginoii.png" mode="" class="tixain-pic"></image> -->
					<view class="tianxian-info">
						<view class="tianxian-text">提现到账</view>
						<view class="tixian-shijian">{{item.time | dateFormat('YYYY-mm-dd')}}</view>
					</view>
					<view class="tixian-jine" >-{{item.jine}}</view>
					<!-- <view class="tixian-jine jia" v-else>+{{item.jine}}</view> -->
					
				</view>
			</view>
			<view :class="[selected==3?'':'hide']">
				
				<view class="" v-if="list3.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
					<image  src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
					暂无数据
				</view>
				
				<view class="tixian" v-for="(item,index) in list3" :key="item.id">
					<image v-if="item.head!=undefined && item.head!=''" :src="$jiekou.uploadBaseUrl+item.head" mode="" class="tixain-pic"></image>
					<image v-else src="../../static/image/loginoii.png" mode="" class="tixain-pic"></image>
					<view class="tianxian-info">
						<view class="tianxian-text">{{item.tuiguangStr}}</view>
						<view class="tixian-shijian">{{item.time | dateFormat('YYYY-mm-dd')}}</view>
					</view>
					<view class="tixian-jine" v-if="item.type==2">-{{item.jine}}</view>
					<view class="tixian-jine jia" v-else>+{{item.jine}}</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	export default {
		data() {
			return {
				selected:"1",
				list1: [],
				list2: [],
				list3: [],
				page: 1,
				size: 100,
				type:1,
				userId:uni.getStorageSync("token"),
				head:uni.getStorageSync("userInfo").head,
				// show:false
			}
		},
		onLoad:function(){
			var that = this;
			this.$util.nuiAjax(this.$jiekou.tuiguangYongjin, {
				pageNo: this.page,
				pageSize: this.size,
				type:this.type,
				userId:this.userId
			}, function(res) {
				that.list1 = res.list;
			})
		},
		methods: {
			dianji:function(index){
				this.selected = index;
				var that = this;
				this.page = 1;
				if (index == 1) {
					this.type = 1;
				}
				if (index == 2) {
					this.type = 2;
					this.$util.nuiAjax(this.$jiekou.selectTixian, {
						pageNo: this.page,
						pageSize: this.size,
						userId:this.userId
					}, function(res) {
						that.list2 = res.list;
					})
					return;
				}
				if (index == 3) {
					this.type = 3;
				}
				this.$util.nuiAjax(this.$jiekou.tuiguangYongjin, {
					pageNo: this.page,
					pageSize: this.size,
					type: this.type,
					userId:this.userId
				}, function(res) {
					that["list" + index] = res.list;
				})
			}
		},
		filters:{
			dateFormat:(date,str)=>{
				if(date!=undefined){
					// date = date.replace(/-/g,"/");
					// date = util.dateUtils.parse(date);
					return util.dateUtils.dateFormat('YYYY年mm月dd日 HH:MM:SS',new Date(date));
				}else{
					return util.dateUtils.dateFormat('YYYY年mm月dd日 HH:MM:SS',date);
				}
			}
		}
	}
</script>

<style lang="scss">
	.tianxian-info{
		flex: 1;
	}
	.tianxian-text{
		height:28rpx;
		font-size:28rpx;
		font-weight:400;
		line-height:28rpx;
	}
	.tixian-shijian{
		height:24rpx;
		font-size:24rpx;
		font-weight:400;
		color:rgba(157,157,157,1);
		line-height:24rpx;
		padding-top: 20rpx;
	}
	.tixian-jine{
		flex: 1;
		height:100%;
		font-size:32rpx;
		font-family:Helvetica;
		color:rgba(34,34,34,1);
		line-height:100%;
		text-align: right;
		padding-top: 18rpx;
	}
	.tixian{
		display: flex;
		flex-direction: row;
		padding: 22rpx 30rpx 24rpx 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.jia{
		color: #CC2121;
	}
	.tixain-pic{
		width: 72rpx;
		height: 72rpx;
		margin-right: 30rpx;
		border-radius: 70rpx;
	}
	page{
		background-color: $page-bg-color;
		height: 100%;
	}
	.daohanglan{
		padding:24rpx 30rpx 0 30rpx;
		justify-content: space-around;
		background-color: $uni-text-color-inverse;
		margin-top: 8rpx;
		margin-bottom: 18rpx;
	}
	.hide{
		display: none;
	}
	.selected{
		height:6rpx;
		background:$uni-color-primary;
		width: 100%;
		margin-top: 18rpx;
	}
	.text-selected{
		color:$uni-color-primary;
	}
	.text-no-selected{
		color:#191919;
	}
	.title-text{
		height:40rpx;
		font-size:28rpx;
		font-weight:500;
		line-height:40rpx;
	}
</style>
